<template>
    <div class="comment">
        <div class="comTop">
            <div class="comLeft">
                <p class="overall_score"> {{scoreData.overall_score}} </p>
                <p class="score_txt">综合评价</p>
                <p class="percent">高于周边商家76.9%</p>
            </div>
            <div class="comRight">
                <p>
                    <span class="comTxt">服务态度</span>
                    <span class="start">
                        <van-rate
                            v-model="value"
                            :size="5"
                            color="#ff9a0d"
                            void-icon="star"
                            void-color="#eee"
                            />
                    </span>
                    <span class="serve_score"> {{scoreData.service_score}} </span>
                </p>
                <p>
                    <span class="comTxt">菜品评价</span>
                    <span class="start">
                        <van-rate
                            v-model="value"
                            :size="5"
                            color="#ff9a0d"
                            void-icon="star"
                            void-color="#eee"
                            />
                    </span>
                    <span class="serve_score"> {{scoreData.food_score}} </span>
                </p>
                <p>
                    <span class="comTxt">送达时间</span>
                    <span class="deliver_time"> {{scoreData.deliver_time}} </span>
                    <span class="deliver_time">分钟</span>
                </p>
            </div>
        </div>
        <ul class="pags">
            <li 
            v-for="(item,index) in kindsData" :key="index"
            :class="{'pag':true,'sel':selectIndex==index}"
            @click="selectPag(index)"
            > {{item.name}}（ {{item.count}} ）</li>
        </ul>
        <ul class="ratings">
            <li class="rat" v-for="(item,index) in ratingsData" :key="index">
                <img src="../assets/download.jpg" alt="" class="pic">
                <div>
                    <p class="fir"> 
                        <span class="username"> {{item.username}} </span>
                        <span class="date"> {{item.rated_at}} </span>
                     </p>
                    <p>
                        <span>
                            <van-rate
                            v-model="value"
                            :size="5"
                            color="#ff9a0d"
                            void-icon="star"
                            void-color="#eee"
                            />
                        </span>
                        <span class="time_spent"> {{item.time_spent_desc}} </span>
                    </p>
                    <div class="showPic" >
                        <img :src="item2.image_hash | setimgurl" alt="" v-for="(item2,index) in item.item_ratings" :key="index">
                    </div>
                    <div >
                        <span class="super" v-for="(item1,index) in item.item_ratings" :key="index"> {{item1.food_name}} </span>
                    </div>
                </div>
            </li>
        </ul>
        
    </div>
</template>
<script>
import Vue from 'vue';
import { Rate } from 'vant';

Vue.use(Rate);
export default {
    data:function() {
        return {
            value:4,
            selectIndex:0,
            id:JSON.parse(localStorage.getItem('shopid')),
            kindsData:[],
            scoreData:[],
            ratingsData:[]
        }
    },
    methods: {
        selectPag(index){
            this.selectIndex = index;
        }
    },
    created() {
        // 请求评价分类
        this.$axios.get('https://elm.cangdu.org/ugc/v2/restaurants/'+this.id+'/ratings/tags').then(res=>{
            this.kindsData = res.data;
            // console.log(this.kindsData)
        }).catch(err=>console.log(err));
        // 请求评价分数
        this.$axios.get('https://elm.cangdu.org/ugc/v2/restaurants/'+this.id+'/ratings/scores').then(res=>{
            this.scoreData = res.data;
            // console.log(this.scoreData)
        }).catch(err=>console.log(err));
        // 获取评价信息
        this.$axios.get('https://elm.cangdu.org/ugc/v2/restaurants/'+this.id+'/ratings').then(res=>{
            this.ratingsData = res.data;
            // console.log(this.ratingsData)
        }).catch(err=>console.log(err));
    },
}
</script>
<style lang="less">
    .comment{
        background-color: #f5f5f5;
        width: 100%;
        height: 667px;
        .comTop{
            background-color: #ffffff;
            display: flex;
            padding: 18px 11px;
            margin-bottom: 12px;
            .comLeft{
                width: 50%;
                text-align: center;
                .overall_score{
                    font-size: 28.125px;
                    color: #ff6600;
                }
                .score_txt{
                    color: #666666;
                    font-size: 15.2px;
                }
                .percent{
                    color: #999999;
                    font-size: 12px;
                }
            }
            .comRight{
                .comTxt{
                    font-size: 15.3px;
                    color: #666666;
                    margin-right: 8px;
                }
                .start{
                    margin-right: 15px;
                }
                .serve_score{
                    font-size: 12px;
                    color: #ff6600;
                }
                .deliver_time{
                    color: #999999;
                    font-size: 12px;
                }
            }
        }
        .pags{
            padding: 11.7px;
            background-color: #ffffff;
            display: flex;
            flex-wrap: wrap;
            .pag{
                font-size: 14px;
                color: #6D7885;
                background-color: #EBF5FF;
                padding: 7px;
                margin: 0 9.3px 4.68px 0;
                border-radius: 5px;
            }
            .sel{
                color: #ffffff;
                background-color: #3190e8;
            }
        }
        .ratings{
            background-color: #fff;
            padding: 0 12px;
            .rat{
                border-top: 1px solid #f1f1f1;
                display: flex;
                padding: 12px 0;
                font-size: 12px;
                .pic{
                    width: 35px;
                    height: 35px;
                    margin-right: 18.75px;
                }
                .fir{
                    // width: 80%;
                    .username{
                        color: #666666;
                        margin-bottom: 5px;
                    }
                    .date{
                        color: #999999;
                        float: right;
                    }
                }
                .time_spent{
                    color: #666666;
                    margin: 0 10px 5px 13px;
                }
                .showPic{
                    margin: 8px 0;
                    img{
                        width: 70px;
                        height: 70px;
                        margin-right: 10px;
                    }
                }
                .super{
                    display: inline-block;
                    width: 48px;
                    color: #999999;
                    margin: 0 7px 4px 0;
                    padding: 4.68px;
                    border: 1px solid #ebebeb;
                    border-radius: 5px;
                    white-space:nowrap;
                    text-overflow:ellipsis;
                    overflow: hidden;
                    box-sizing: border-box;
                }
            }
        }
    }
</style>